
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-bankcard_icon"></use>
                    </svg>
                    <div class="name">银行卡</div>
                    <div class="fontclass">#vip-bankcard_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-bag_icon"></use>
                    </svg>
                    <div class="name">包</div>
                    <div class="fontclass">#vip-bag_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-address_icon"></use>
                    </svg>
                    <div class="name">地址</div>
                    <div class="fontclass">#vip-address_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-affirm_icon"></use>
                    </svg>
                    <div class="name">确认</div>
                    <div class="fontclass">#vip-affirm_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-add_icon"></use>
                    </svg>
                    <div class="name">添加</div>
                    <div class="fontclass">#vip-add_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-bar-chart_icon"></use>
                    </svg>
                    <div class="name">条形图</div>
                    <div class="fontclass">#vip-bar-chart_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-camera_icon"></use>
                    </svg>
                    <div class="name">相机</div>
                    <div class="fontclass">#vip-camera_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-cart_icon"></use>
                    </svg>
                    <div class="name">购物车</div>
                    <div class="fontclass">#vip-cart_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-classify_icon"></use>
                    </svg>
                    <div class="name">分类</div>
                    <div class="fontclass">#vip-classify_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-conversation_icon"></use>
                    </svg>
                    <div class="name">聊天</div>
                    <div class="fontclass">#vip-conversation_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-copy_icon"></use>
                    </svg>
                    <div class="name">复制</div>
                    <div class="fontclass">#vip-copy_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-edit_icon"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#vip-edit_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-dustbin_icon"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#vip-dustbin_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-gift_icon"></use>
                    </svg>
                    <div class="name">礼物</div>
                    <div class="fontclass">#vip-gift_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-line-chart_icon"></use>
                    </svg>
                    <div class="name">折线图</div>
                    <div class="fontclass">#vip-line-chart_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-love_icon"></use>
                    </svg>
                    <div class="name">喜欢</div>
                    <div class="fontclass">#vip-love_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-more_icon"></use>
                    </svg>
                    <div class="name">更多</div>
                    <div class="fontclass">#vip-more_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-password_icon"></use>
                    </svg>
                    <div class="name">密码</div>
                    <div class="fontclass">#vip-password_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-phone_icon"></use>
                    </svg>
                    <div class="name">手机</div>
                    <div class="fontclass">#vip-phone_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-picture_icon"></use>
                    </svg>
                    <div class="name">图片</div>
                    <div class="fontclass">#vip-picture_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-pie-chart_icon"></use>
                    </svg>
                    <div class="name">饼状图</div>
                    <div class="fontclass">#vip-pie-chart_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-praise_icon"></use>
                    </svg>
                    <div class="name">赞</div>
                    <div class="fontclass">#vip-praise_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-reduce_icon"></use>
                    </svg>
                    <div class="name">减少</div>
                    <div class="fontclass">#vip-reduce_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-richscan_icon"></use>
                    </svg>
                    <div class="name">扫一扫</div>
                    <div class="fontclass">#vip-richscan_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-screen_icon"></use>
                    </svg>
                    <div class="name">筛选</div>
                    <div class="fontclass">#vip-screen_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-share_icon"></use>
                    </svg>
                    <div class="name">分享</div>
                    <div class="fontclass">#vip-share_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-text_icon"></use>
                    </svg>
                    <div class="name">文本</div>
                    <div class="fontclass">#vip-text_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-store_icon"></use>
                    </svg>
                    <div class="name">商城</div>
                    <div class="fontclass">#vip-store_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-time_icon"></use>
                    </svg>
                    <div class="name">时间</div>
                    <div class="fontclass">#vip-time_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-transmit_icon"></use>
                    </svg>
                    <div class="name">转发</div>
                    <div class="fontclass">#vip-transmit_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-wallet_icon"></use>
                    </svg>
                    <div class="name">钱包</div>
                    <div class="fontclass">#vip-wallet_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-wifi_icon"></use>
                    </svg>
                    <div class="name">无线网</div>
                    <div class="fontclass">#vip-wifi_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-folder_icon"></use>
                    </svg>
                    <div class="name">文件夹</div>
                    <div class="fontclass">#vip-folder_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-amplification_icon"></use>
                    </svg>
                    <div class="name">放大</div>
                    <div class="fontclass">#vip-amplification_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-calendar_icon"></use>
                    </svg>
                    <div class="name">日历</div>
                    <div class="fontclass">#vip-calendar_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-label_icon"></use>
                    </svg>
                    <div class="name">标签</div>
                    <div class="fontclass">#vip-label_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-linkman-contacts_ico"></use>
                    </svg>
                    <div class="name">好友列表</div>
                    <div class="fontclass">#vip-linkman-contacts_ico</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-mute_icon"></use>
                    </svg>
                    <div class="name">禁音</div>
                    <div class="fontclass">#vip-mute_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-play_icon"></use>
                    </svg>
                    <div class="name">播放</div>
                    <div class="fontclass">#vip-play_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-service_icon"></use>
                    </svg>
                    <div class="name">客服</div>
                    <div class="fontclass">#vip-service_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-refresh_icon"></use>
                    </svg>
                    <div class="name">刷新</div>
                    <div class="fontclass">#vip-refresh_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-order_icon"></use>
                    </svg>
                    <div class="name">订单</div>
                    <div class="fontclass">#vip-order_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-red-packet_icon"></use>
                    </svg>
                    <div class="name">红包</div>
                    <div class="fontclass">#vip-red-packet_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-news_icon"></use>
                    </svg>
                    <div class="name">新闻</div>
                    <div class="fontclass">#vip-news_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shrink_icon"></use>
                    </svg>
                    <div class="name">缩小</div>
                    <div class="fontclass">#vip-shrink_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-stick_icon"></use>
                    </svg>
                    <div class="name">置顶</div>
                    <div class="fontclass">#vip-stick_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-video_icon"></use>
                    </svg>
                    <div class="name">录像</div>
                    <div class="fontclass">#vip-video_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-sort_icon"></use>
                    </svg>
                    <div class="name">排序</div>
                    <div class="fontclass">#vip-sort_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-suspend_icon"></use>
                    </svg>
                    <div class="name">暂停</div>
                    <div class="fontclass">#vip-suspend_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-voice_icon"></use>
                    </svg>
                    <div class="name">语音</div>
                    <div class="fontclass">#vip-voice_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-volume_icon"></use>
                    </svg>
                    <div class="name">声音</div>
                    <div class="fontclass">#vip-volume_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-warning_icon"></use>
                    </svg>
                    <div class="name">注意</div>
                    <div class="fontclass">#vip-warning_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-activity_icon"></use>
                    </svg>
                    <div class="name">活动</div>
                    <div class="fontclass">#vip-activity_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-book_icon"></use>
                    </svg>
                    <div class="name">书籍</div>
                    <div class="fontclass">#vip-book_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-add-friends_icon"></use>
                    </svg>
                    <div class="name">添加好友</div>
                    <div class="fontclass">#vip-add-friends_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-download_icon"></use>
                    </svg>
                    <div class="name">下载</div>
                    <div class="fontclass">#vip-download_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-electricity_icon"></use>
                    </svg>
                    <div class="name">电</div>
                    <div class="fontclass">#vip-electricity_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-emoji_icon"></use>
                    </svg>
                    <div class="name">表情</div>
                    <div class="fontclass">#vip-emoji_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-female_icon"></use>
                    </svg>
                    <div class="name">女</div>
                    <div class="fontclass">#vip-female_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-live_icon"></use>
                    </svg>
                    <div class="name">直播</div>
                    <div class="fontclass">#vip-live_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-male_icon"></use>
                    </svg>
                    <div class="name">男</div>
                    <div class="fontclass">#vip-male_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-list_icon"></use>
                    </svg>
                    <div class="name">列表</div>
                    <div class="fontclass">#vip-list_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-search_icon"></use>
                    </svg>
                    <div class="name">搜索</div>
                    <div class="fontclass">#vip-search_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-keyboard_icon"></use>
                    </svg>
                    <div class="name">键盘</div>
                    <div class="fontclass">#vip-keyboard_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-member_icon"></use>
                    </svg>
                    <div class="name">会员</div>
                    <div class="fontclass">#vip-member_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-water_icon"></use>
                    </svg>
                    <div class="name">水</div>
                    <div class="fontclass">#vip-water_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-upload_icon"></use>
                    </svg>
                    <div class="name">上传</div>
                    <div class="fontclass">#vip-upload_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-computer_icon"></use>
                    </svg>
                    <div class="name">电脑</div>
                    <div class="fontclass">#vip-computer_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-e-mail_icon"></use>
                    </svg>
                    <div class="name">邮件</div>
                    <div class="fontclass">#vip-e-mail_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-education_icon"></use>
                    </svg>
                    <div class="name">教育</div>
                    <div class="fontclass">#vip-education_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-decoration_icon"></use>
                    </svg>
                    <div class="name">奖章</div>
                    <div class="fontclass">#vip-decoration_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-heavy-rain_icon"></use>
                    </svg>
                    <div class="name">大雨</div>
                    <div class="fontclass">#vip-heavy-rain_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-fine_icon"></use>
                    </svg>
                    <div class="name">晴天</div>
                    <div class="fontclass">#vip-fine_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-intense-fall_icon"></use>
                    </svg>
                    <div class="name">暴雨</div>
                    <div class="fontclass">#vip-intense-fall_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-heavy-snow_icon"></use>
                    </svg>
                    <div class="name">大雪</div>
                    <div class="fontclass">#vip-heavy-snow_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-membership-card_icon"></use>
                    </svg>
                    <div class="name">会员卡</div>
                    <div class="fontclass">#vip-membership-card_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-medal_icon"></use>
                    </svg>
                    <div class="name">奖牌</div>
                    <div class="fontclass">#vip-medal_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-moderate-rain_icon"></use>
                    </svg>
                    <div class="name">中雨</div>
                    <div class="fontclass">#vip-moderate-rain_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-pan_icon"></use>
                    </svg>
                    <div class="name">铅笔</div>
                    <div class="fontclass">#vip-pan_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-printer_icon"></use>
                    </svg>
                    <div class="name">打印机</div>
                    <div class="fontclass">#vip-printer_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-overcast-sky_icon"></use>
                    </svg>
                    <div class="name">阴天</div>
                    <div class="fontclass">#vip-overcast-sky_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-moderate-snow_icon"></use>
                    </svg>
                    <div class="name">中雪</div>
                    <div class="fontclass">#vip-moderate-snow_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-thermometer_icon"></use>
                    </svg>
                    <div class="name">温度</div>
                    <div class="fontclass">#vip-thermometer_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-spit_icon"></use>
                    </svg>
                    <div class="name">小雨</div>
                    <div class="fontclass">#vip-spit_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-thundershower_icon"></use>
                    </svg>
                    <div class="name">雷阵雨</div>
                    <div class="fontclass">#vip-thundershower_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-tool-cabinet_icon"></use>
                    </svg>
                    <div class="name">工具箱</div>
                    <div class="fontclass">#vip-tool-cabinet_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-trophy_icon"></use>
                    </svg>
                    <div class="name">奖杯</div>
                    <div class="fontclass">#vip-trophy_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-broken-sky_icon"></use>
                    </svg>
                    <div class="name">多云</div>
                    <div class="fontclass">#vip-broken-sky_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-airplane_icon"></use>
                    </svg>
                    <div class="name">airplane_icon</div>
                    <div class="fontclass">#vip-airplane_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-air_condition_icon"></use>
                    </svg>
                    <div class="name">air_condition_icon</div>
                    <div class="fontclass">#vip-air_condition_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-alarm_clock_icon"></use>
                    </svg>
                    <div class="name">alarm_clock_icon</div>
                    <div class="fontclass">#vip-alarm_clock_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-atm_icon"></use>
                    </svg>
                    <div class="name">atm_icon</div>
                    <div class="fontclass">#vip-atm_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-alarm_icon"></use>
                    </svg>
                    <div class="name">alarm_icon</div>
                    <div class="fontclass">#vip-alarm_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-bank_icon"></use>
                    </svg>
                    <div class="name">bank_icon</div>
                    <div class="fontclass">#vip-bank_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-balance_scale_icon"></use>
                    </svg>
                    <div class="name">balance_scale_icon</div>
                    <div class="fontclass">#vip-balance_scale_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-ban_barrage_icon"></use>
                    </svg>
                    <div class="name">ban_barrage_icon</div>
                    <div class="fontclass">#vip-ban_barrage_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-barrage_icon"></use>
                    </svg>
                    <div class="name">barrage_icon</div>
                    <div class="fontclass">#vip-barrage_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-batch_processing_ico"></use>
                    </svg>
                    <div class="name">batch_processing_ico</div>
                    <div class="fontclass">#vip-batch_processing_ico</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-bath_towel_icon"></use>
                    </svg>
                    <div class="name">bath_towel_icon</div>
                    <div class="fontclass">#vip-bath_towel_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-beverage_icon"></use>
                    </svg>
                    <div class="name">beverage_icon</div>
                    <div class="fontclass">#vip-beverage_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-bedroom_icon"></use>
                    </svg>
                    <div class="name">bedroom_icon</div>
                    <div class="fontclass">#vip-bedroom_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-bike_icon"></use>
                    </svg>
                    <div class="name">bike_icon</div>
                    <div class="fontclass">#vip-bike_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-battery_charging_ico"></use>
                    </svg>
                    <div class="name">battery_charging_ico</div>
                    <div class="fontclass">#vip-battery_charging_ico</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-bathroom_icon"></use>
                    </svg>
                    <div class="name">bathroom_icon</div>
                    <div class="fontclass">#vip-bathroom_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-capsule_icon"></use>
                    </svg>
                    <div class="name">capsule_icon</div>
                    <div class="fontclass">#vip-capsule_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-boat_icon"></use>
                    </svg>
                    <div class="name">boat_icon</div>
                    <div class="fontclass">#vip-boat_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-car_icon"></use>
                    </svg>
                    <div class="name">car_icon</div>
                    <div class="fontclass">#vip-car_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-category_find_icon"></use>
                    </svg>
                    <div class="name">category_find_icon</div>
                    <div class="fontclass">#vip-category_find_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-circulation_icon"></use>
                    </svg>
                    <div class="name">circulation_icon</div>
                    <div class="fontclass">#vip-circulation_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-cold_icon"></use>
                    </svg>
                    <div class="name">cold_icon</div>
                    <div class="fontclass">#vip-cold_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-code_icon"></use>
                    </svg>
                    <div class="name">code_icon</div>
                    <div class="fontclass">#vip-code_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-concentrate_icon"></use>
                    </svg>
                    <div class="name">concentrate_icon</div>
                    <div class="fontclass">#vip-concentrate_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-controller_icon"></use>
                    </svg>
                    <div class="name">controller_icon</div>
                    <div class="fontclass">#vip-controller_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-cup_icon"></use>
                    </svg>
                    <div class="name">cup_icon</div>
                    <div class="fontclass">#vip-cup_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-collect_icon"></use>
                    </svg>
                    <div class="name">collect_icon</div>
                    <div class="fontclass">#vip-collect_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-cpu_icon"></use>
                    </svg>
                    <div class="name">cpu_icon</div>
                    <div class="fontclass">#vip-cpu_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-droplight_icon"></use>
                    </svg>
                    <div class="name">droplight_icon</div>
                    <div class="fontclass">#vip-droplight_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-flashlight_icon"></use>
                    </svg>
                    <div class="name">flashlight_icon</div>
                    <div class="fontclass">#vip-flashlight_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-forbid_icon"></use>
                    </svg>
                    <div class="name">forbid_icon</div>
                    <div class="fontclass">#vip-forbid_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-game_icon"></use>
                    </svg>
                    <div class="name">game_icon</div>
                    <div class="fontclass">#vip-game_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-fruit_icon"></use>
                    </svg>
                    <div class="name">fruit_icon</div>
                    <div class="fontclass">#vip-fruit_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-fitness_icon"></use>
                    </svg>
                    <div class="name">fitness_icon</div>
                    <div class="fontclass">#vip-fitness_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-fire_hydrant_icon"></use>
                    </svg>
                    <div class="name">fire_hydrant_icon</div>
                    <div class="fontclass">#vip-fire_hydrant_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-government_icon"></use>
                    </svg>
                    <div class="name">government_icon</div>
                    <div class="fontclass">#vip-government_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-ice_box_icon"></use>
                    </svg>
                    <div class="name">ice_box_icon</div>
                    <div class="fontclass">#vip-ice_box_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-hotel_icon"></use>
                    </svg>
                    <div class="name">hotel_icon</div>
                    <div class="fontclass">#vip-hotel_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-integral_icon"></use>
                    </svg>
                    <div class="name">integral_icon</div>
                    <div class="fontclass">#vip-integral_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-law_icon"></use>
                    </svg>
                    <div class="name">law_icon</div>
                    <div class="fontclass">#vip-law_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-link_icon"></use>
                    </svg>
                    <div class="name">link_icon</div>
                    <div class="fontclass">#vip-link_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-loading_icon"></use>
                    </svg>
                    <div class="name">loading_icon</div>
                    <div class="fontclass">#vip-loading_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-menu_icon"></use>
                    </svg>
                    <div class="name">menu_icon</div>
                    <div class="fontclass">#vip-menu_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-map_icon"></use>
                    </svg>
                    <div class="name">map_icon</div>
                    <div class="fontclass">#vip-map_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-money_icon"></use>
                    </svg>
                    <div class="name">money_icon</div>
                    <div class="fontclass">#vip-money_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-network_icon"></use>
                    </svg>
                    <div class="name">network_icon</div>
                    <div class="fontclass">#vip-network_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-organization_icon"></use>
                    </svg>
                    <div class="name">organization_icon</div>
                    <div class="fontclass">#vip-organization_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-pet_icon"></use>
                    </svg>
                    <div class="name">pet_icon</div>
                    <div class="fontclass">#vip-pet_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-ppt_files_icon"></use>
                    </svg>
                    <div class="name">ppt_files_icon</div>
                    <div class="fontclass">#vip-ppt_files_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-qr_code_icon"></use>
                    </svg>
                    <div class="name">qr_code_icon</div>
                    <div class="fontclass">#vip-qr_code_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-plug_icon"></use>
                    </svg>
                    <div class="name">plug_icon</div>
                    <div class="fontclass">#vip-plug_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-repeal_icon"></use>
                    </svg>
                    <div class="name">repeal_icon</div>
                    <div class="fontclass">#vip-repeal_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-quit_icon"></use>
                    </svg>
                    <div class="name">quit_icon</div>
                    <div class="fontclass">#vip-quit_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-resource_icon"></use>
                    </svg>
                    <div class="name">resource_icon</div>
                    <div class="fontclass">#vip-resource_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-restaurant_icon"></use>
                    </svg>
                    <div class="name">restaurant_icon</div>
                    <div class="fontclass">#vip-restaurant_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-rule_icon"></use>
                    </svg>
                    <div class="name">rule_icon</div>
                    <div class="fontclass">#vip-rule_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-router_icon"></use>
                    </svg>
                    <div class="name">router_icon</div>
                    <div class="fontclass">#vip-router_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-rocket_icon"></use>
                    </svg>
                    <div class="name">rocket_icon</div>
                    <div class="fontclass">#vip-rocket_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-salary_icon"></use>
                    </svg>
                    <div class="name">salary_icon</div>
                    <div class="fontclass">#vip-salary_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-server_icon"></use>
                    </svg>
                    <div class="name">server_icon</div>
                    <div class="fontclass">#vip-server_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-sd_card_icon"></use>
                    </svg>
                    <div class="name">sd_card_icon</div>
                    <div class="fontclass">#vip-sd_card_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-show_icon"></use>
                    </svg>
                    <div class="name">show_icon</div>
                    <div class="fontclass">#vip-show_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shield_icon"></use>
                    </svg>
                    <div class="name">shield_icon</div>
                    <div class="fontclass">#vip-shield_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-speed_icon"></use>
                    </svg>
                    <div class="name">speed_icon</div>
                    <div class="fontclass">#vip-speed_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-steamer_icon"></use>
                    </svg>
                    <div class="name">steamer_icon</div>
                    <div class="fontclass">#vip-steamer_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-tablet_computer_icon"></use>
                    </svg>
                    <div class="name">tablet_computer_icon</div>
                    <div class="fontclass">#vip-tablet_computer_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-tailor_icon"></use>
                    </svg>
                    <div class="name">tailor_icon</div>
                    <div class="fontclass">#vip-tailor_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-timer_icon"></use>
                    </svg>
                    <div class="name">timer_icon</div>
                    <div class="fontclass">#vip-timer_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-toy_icon"></use>
                    </svg>
                    <div class="name">toy_icon</div>
                    <div class="fontclass">#vip-toy_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-train_icon"></use>
                    </svg>
                    <div class="name">train_icon</div>
                    <div class="fontclass">#vip-train_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-transition_icon"></use>
                    </svg>
                    <div class="name">transition_icon</div>
                    <div class="fontclass">#vip-transition_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-translate_icon"></use>
                    </svg>
                    <div class="name">translate_icon</div>
                    <div class="fontclass">#vip-translate_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-tree_icon"></use>
                    </svg>
                    <div class="name">tree_icon</div>
                    <div class="fontclass">#vip-tree_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-tv_icon"></use>
                    </svg>
                    <div class="name">tv_icon</div>
                    <div class="fontclass">#vip-tv_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-u_disk_icon"></use>
                    </svg>
                    <div class="name">u_disk_icon</div>
                    <div class="fontclass">#vip-u_disk_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-umbrella_icon"></use>
                    </svg>
                    <div class="name">umbrella_icon</div>
                    <div class="fontclass">#vip-umbrella_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-wait_sending_icon"></use>
                    </svg>
                    <div class="name">wait_sending_icon</div>
                    <div class="fontclass">#vip-wait_sending_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-warehouse_icon"></use>
                    </svg>
                    <div class="name">warehouse_icon</div>
                    <div class="fontclass">#vip-warehouse_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-watermelon_icon"></use>
                    </svg>
                    <div class="name">watermelon_icon</div>
                    <div class="fontclass">#vip-watermelon_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-wireframe_icon"></use>
                    </svg>
                    <div class="name">wireframe_icon</div>
                    <div class="fontclass">#vip-wireframe_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-word_files_icon"></use>
                    </svg>
                    <div class="name">word_files_icon</div>
                    <div class="fontclass">#vip-word_files_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-workbench_icon"></use>
                    </svg>
                    <div class="name">workbench_icon</div>
                    <div class="fontclass">#vip-workbench_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-bianji1"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#vip-bianji1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-anquan"></use>
                    </svg>
                    <div class="name">安全</div>
                    <div class="fontclass">#vip-anquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-chexiao"></use>
                    </svg>
                    <div class="name">撤销</div>
                    <div class="fontclass">#vip-chexiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-bijiben"></use>
                    </svg>
                    <div class="name">笔记本</div>
                    <div class="fontclass">#vip-bijiben</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-chabei"></use>
                    </svg>
                    <div class="name">茶杯</div>
                    <div class="fontclass">#vip-chabei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-daifahuo"></use>
                    </svg>
                    <div class="name">待发货</div>
                    <div class="fontclass">#vip-daifahuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-daifukuan"></use>
                    </svg>
                    <div class="name">待付款</div>
                    <div class="fontclass">#vip-daifukuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-daishouhuo"></use>
                    </svg>
                    <div class="name">待收货</div>
                    <div class="fontclass">#vip-daishouhuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-dianzan"></use>
                    </svg>
                    <div class="name">点赞</div>
                    <div class="fontclass">#vip-dianzan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-diannao"></use>
                    </svg>
                    <div class="name">电脑</div>
                    <div class="fontclass">#vip-diannao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-dianhua"></use>
                    </svg>
                    <div class="name">电话</div>
                    <div class="fontclass">#vip-dianhua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-dingwei"></use>
                    </svg>
                    <div class="name">定位</div>
                    <div class="fontclass">#vip-dingwei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-fanhui1"></use>
                    </svg>
                    <div class="name">返回</div>
                    <div class="fontclass">#vip-fanhui1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-fanhui2"></use>
                    </svg>
                    <div class="name">返回2</div>
                    <div class="fontclass">#vip-fanhui2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-fenlei"></use>
                    </svg>
                    <div class="name">分类</div>
                    <div class="fontclass">#vip-fenlei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-fenlei1"></use>
                    </svg>
                    <div class="name">分类2</div>
                    <div class="fontclass">#vip-fenlei1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-fanxian"></use>
                    </svg>
                    <div class="name">返现</div>
                    <div class="fontclass">#vip-fanxian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-fenxiang1"></use>
                    </svg>
                    <div class="name">分享</div>
                    <div class="fontclass">#vip-fenxiang1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-fenxiang2"></use>
                    </svg>
                    <div class="name">分享2</div>
                    <div class="fontclass">#vip-fenxiang2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-geren"></use>
                    </svg>
                    <div class="name">个人</div>
                    <div class="fontclass">#vip-geren</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-gongjuxiang"></use>
                    </svg>
                    <div class="name">工具箱</div>
                    <div class="fontclass">#vip-gongjuxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-gengduo"></use>
                    </svg>
                    <div class="name">更多2</div>
                    <div class="fontclass">#vip-gengduo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-gouwu"></use>
                    </svg>
                    <div class="name">购物</div>
                    <div class="fontclass">#vip-gouwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-gouwuche"></use>
                    </svg>
                    <div class="name">购物车</div>
                    <div class="fontclass">#vip-gouwuche</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-gengduo1"></use>
                    </svg>
                    <div class="name">更多</div>
                    <div class="fontclass">#vip-gengduo1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-guanbi1"></use>
                    </svg>
                    <div class="name">关闭</div>
                    <div class="fontclass">#vip-guanbi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-guanbi2"></use>
                    </svg>
                    <div class="name">关闭2</div>
                    <div class="fontclass">#vip-guanbi2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-guanbi3"></use>
                    </svg>
                    <div class="name">关闭3</div>
                    <div class="fontclass">#vip-guanbi3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-jianshao"></use>
                    </svg>
                    <div class="name">减少</div>
                    <div class="fontclass">#vip-jianshao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-jianshao1"></use>
                    </svg>
                    <div class="name">减少2</div>
                    <div class="fontclass">#vip-jianshao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-kefu"></use>
                    </svg>
                    <div class="name">客服</div>
                    <div class="fontclass">#vip-kefu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-lianjie"></use>
                    </svg>
                    <div class="name">链接</div>
                    <div class="fontclass">#vip-lianjie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-jishi"></use>
                    </svg>
                    <div class="name">计时</div>
                    <div class="fontclass">#vip-jishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-liwu"></use>
                    </svg>
                    <div class="name">礼物</div>
                    <div class="fontclass">#vip-liwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-liebiao1"></use>
                    </svg>
                    <div class="name">列表2</div>
                    <div class="fontclass">#vip-liebiao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-paihang"></use>
                    </svg>
                    <div class="name">排行</div>
                    <div class="fontclass">#vip-paihang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-liebiao2"></use>
                    </svg>
                    <div class="name">列表</div>
                    <div class="fontclass">#vip-liebiao2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-remen"></use>
                    </svg>
                    <div class="name">热门</div>
                    <div class="fontclass">#vip-remen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shanchu1"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#vip-shanchu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shangchuan"></use>
                    </svg>
                    <div class="name">上传</div>
                    <div class="fontclass">#vip-shangchuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-rili"></use>
                    </svg>
                    <div class="name">日历</div>
                    <div class="fontclass">#vip-rili</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shangyibu"></use>
                    </svg>
                    <div class="name">上一步</div>
                    <div class="fontclass">#vip-shangyibu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shoucang1"></use>
                    </svg>
                    <div class="name">收藏2</div>
                    <div class="fontclass">#vip-shoucang1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shezhi1"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#vip-shezhi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shoucang2"></use>
                    </svg>
                    <div class="name">收藏</div>
                    <div class="fontclass">#vip-shoucang2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shipin1"></use>
                    </svg>
                    <div class="name">视频</div>
                    <div class="fontclass">#vip-shipin1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shouji"></use>
                    </svg>
                    <div class="name">手机</div>
                    <div class="fontclass">#vip-shouji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shu"></use>
                    </svg>
                    <div class="name">书</div>
                    <div class="fontclass">#vip-shu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-sousuo"></use>
                    </svg>
                    <div class="name">搜索</div>
                    <div class="fontclass">#vip-sousuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-tishi3"></use>
                    </svg>
                    <div class="name">提示</div>
                    <div class="fontclass">#vip-tishi3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-suo"></use>
                    </svg>
                    <div class="name">锁</div>
                    <div class="fontclass">#vip-suo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-tianqi"></use>
                    </svg>
                    <div class="name">天气</div>
                    <div class="fontclass">#vip-tianqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-tianjia1"></use>
                    </svg>
                    <div class="name">添加2</div>
                    <div class="fontclass">#vip-tianjia1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-tongzhi"></use>
                    </svg>
                    <div class="name">通知</div>
                    <div class="fontclass">#vip-tongzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-tuikuan"></use>
                    </svg>
                    <div class="name">退款</div>
                    <div class="fontclass">#vip-tuikuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-wenjian1"></use>
                    </svg>
                    <div class="name">文件</div>
                    <div class="fontclass">#vip-wenjian1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-tuandui"></use>
                    </svg>
                    <div class="name">团队</div>
                    <div class="fontclass">#vip-tuandui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-tongzhi1"></use>
                    </svg>
                    <div class="name">通知2</div>
                    <div class="fontclass">#vip-tongzhi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-tianjia2"></use>
                    </svg>
                    <div class="name">添加</div>
                    <div class="fontclass">#vip-tianjia2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-wenjian2"></use>
                    </svg>
                    <div class="name">文件2</div>
                    <div class="fontclass">#vip-wenjian2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-wenzhang"></use>
                    </svg>
                    <div class="name">文章</div>
                    <div class="fontclass">#vip-wenzhang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-wenti"></use>
                    </svg>
                    <div class="name">问题</div>
                    <div class="fontclass">#vip-wenti</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-xiazai"></use>
                    </svg>
                    <div class="name">下载</div>
                    <div class="fontclass">#vip-xiazai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-wenti1"></use>
                    </svg>
                    <div class="name">问题2</div>
                    <div class="fontclass">#vip-wenti1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-xiangji"></use>
                    </svg>
                    <div class="name">相机</div>
                    <div class="fontclass">#vip-xiangji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-xiaoxi"></use>
                    </svg>
                    <div class="name">消息</div>
                    <div class="fontclass">#vip-xiaoxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-xiaoxi1"></use>
                    </svg>
                    <div class="name">消息2</div>
                    <div class="fontclass">#vip-xiaoxi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-xinfeng"></use>
                    </svg>
                    <div class="name">信封</div>
                    <div class="fontclass">#vip-xinfeng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-xinxi"></use>
                    </svg>
                    <div class="name">信息</div>
                    <div class="fontclass">#vip-xinxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-xunhuan"></use>
                    </svg>
                    <div class="name">循环</div>
                    <div class="fontclass">#vip-xunhuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-yinle"></use>
                    </svg>
                    <div class="name">音乐</div>
                    <div class="fontclass">#vip-yinle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-yinliang"></use>
                    </svg>
                    <div class="name">音量</div>
                    <div class="fontclass">#vip-yinliang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-zhangdan"></use>
                    </svg>
                    <div class="name">账单</div>
                    <div class="fontclass">#vip-zhangdan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-youhuiquan"></use>
                    </svg>
                    <div class="name">优惠券2</div>
                    <div class="fontclass">#vip-youhuiquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-zhaopian"></use>
                    </svg>
                    <div class="name">照片</div>
                    <div class="fontclass">#vip-zhaopian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-zhengque"></use>
                    </svg>
                    <div class="name">正确</div>
                    <div class="fontclass">#vip-zhengque</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-youhuiquan1"></use>
                    </svg>
                    <div class="name">优惠券</div>
                    <div class="fontclass">#vip-youhuiquan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-zhengque1"></use>
                    </svg>
                    <div class="name">正确2</div>
                    <div class="fontclass">#vip-zhengque1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-zhuye"></use>
                    </svg>
                    <div class="name">主页</div>
                    <div class="fontclass">#vip-zhuye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-wenjian"></use>
                    </svg>
                    <div class="name">文件</div>
                    <div class="fontclass">#vip-wenjian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-wenjianjia"></use>
                    </svg>
                    <div class="name">文件夹</div>
                    <div class="fontclass">#vip-wenjianjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-xinwenjianjia"></use>
                    </svg>
                    <div class="name">新文件夹</div>
                    <div class="fontclass">#vip-xinwenjianjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-kaiwenjianjia"></use>
                    </svg>
                    <div class="name">开文件夹</div>
                    <div class="fontclass">#vip-kaiwenjianjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-liebiao"></use>
                    </svg>
                    <div class="name">列表</div>
                    <div class="fontclass">#vip-liebiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-fanli"></use>
                    </svg>
                    <div class="name">范例</div>
                    <div class="fontclass">#vip-fanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-moban"></use>
                    </svg>
                    <div class="name">模版</div>
                    <div class="fontclass">#vip-moban</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-yewu"></use>
                    </svg>
                    <div class="name">业务</div>
                    <div class="fontclass">#vip-yewu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-jihe"></use>
                    </svg>
                    <div class="name">集合</div>
                    <div class="fontclass">#vip-jihe</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-kejian"></use>
                    </svg>
                    <div class="name">可见</div>
                    <div class="fontclass">#vip-kejian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-guanlian"></use>
                    </svg>
                    <div class="name">关联</div>
                    <div class="fontclass">#vip-guanlian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shuju"></use>
                    </svg>
                    <div class="name">数据</div>
                    <div class="fontclass">#vip-shuju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-xinshuju"></use>
                    </svg>
                    <div class="name">新数据</div>
                    <div class="fontclass">#vip-xinshuju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-xinjianwenjian"></use>
                    </svg>
                    <div class="name">新建文件</div>
                    <div class="fontclass">#vip-xinjianwenjian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-wenjianleixing"></use>
                    </svg>
                    <div class="name">文件类型</div>
                    <div class="fontclass">#vip-wenjianleixing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-yuncunchu"></use>
                    </svg>
                    <div class="name">云存储</div>
                    <div class="fontclass">#vip-yuncunchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-rizhi"></use>
                    </svg>
                    <div class="name">日志</div>
                    <div class="fontclass">#vip-rizhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-bukejian"></use>
                    </svg>
                    <div class="name">不可见</div>
                    <div class="fontclass">#vip-bukejian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-fabu"></use>
                    </svg>
                    <div class="name">发布</div>
                    <div class="fontclass">#vip-fabu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-yujing"></use>
                    </svg>
                    <div class="name">预警</div>
                    <div class="fontclass">#vip-yujing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-yulan"></use>
                    </svg>
                    <div class="name">预览</div>
                    <div class="fontclass">#vip-yulan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-xianshang"></use>
                    </svg>
                    <div class="name">线上</div>
                    <div class="fontclass">#vip-xianshang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-ceshi"></use>
                    </svg>
                    <div class="name">测试</div>
                    <div class="fontclass">#vip-ceshi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-zanting"></use>
                    </svg>
                    <div class="name">暂停</div>
                    <div class="fontclass">#vip-zanting</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-tingzhi"></use>
                    </svg>
                    <div class="name">停止</div>
                    <div class="fontclass">#vip-tingzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-bofang"></use>
                    </svg>
                    <div class="name">播放</div>
                    <div class="fontclass">#vip-bofang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-xinyonghu"></use>
                    </svg>
                    <div class="name">新用户</div>
                    <div class="fontclass">#vip-xinyonghu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-yonghu"></use>
                    </svg>
                    <div class="name">用户</div>
                    <div class="fontclass">#vip-yonghu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-yonghubianji"></use>
                    </svg>
                    <div class="name">用户编辑</div>
                    <div class="fontclass">#vip-yonghubianji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-baocun"></use>
                    </svg>
                    <div class="name">保存</div>
                    <div class="fontclass">#vip-baocun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shezhi"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#vip-shezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-bianji"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#vip-bianji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shanchu"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#vip-shanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-guanbi"></use>
                    </svg>
                    <div class="name">关闭</div>
                    <div class="fontclass">#vip-guanbi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-niantie"></use>
                    </svg>
                    <div class="name">粘贴</div>
                    <div class="fontclass">#vip-niantie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-fuzhi"></use>
                    </svg>
                    <div class="name">复制</div>
                    <div class="fontclass">#vip-fuzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-tuichu"></use>
                    </svg>
                    <div class="name">退出</div>
                    <div class="fontclass">#vip-tuichu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-xufei"></use>
                    </svg>
                    <div class="name">续费</div>
                    <div class="fontclass">#vip-xufei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-lingcunwei"></use>
                    </svg>
                    <div class="name">另存为</div>
                    <div class="fontclass">#vip-lingcunwei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-tianjia"></use>
                    </svg>
                    <div class="name">添加</div>
                    <div class="fontclass">#vip-tianjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shoujijiebang"></use>
                    </svg>
                    <div class="name">手机解绑</div>
                    <div class="fontclass">#vip-shoujijiebang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shoujibangding"></use>
                    </svg>
                    <div class="name">手机绑定</div>
                    <div class="fontclass">#vip-shoujibangding</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-beian"></use>
                    </svg>
                    <div class="name">备案</div>
                    <div class="fontclass">#vip-beian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shouye"></use>
                    </svg>
                    <div class="name">首页</div>
                    <div class="fontclass">#vip-shouye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-jianqie"></use>
                    </svg>
                    <div class="name">剪切</div>
                    <div class="fontclass">#vip-jianqie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-fangdajing"></use>
                    </svg>
                    <div class="name">放大镜</div>
                    <div class="fontclass">#vip-fangdajing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-fangda"></use>
                    </svg>
                    <div class="name">放大</div>
                    <div class="fontclass">#vip-fangda</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-daochu"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#vip-daochu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-daoru"></use>
                    </svg>
                    <div class="name">导入</div>
                    <div class="fontclass">#vip-daoru</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shijian"></use>
                    </svg>
                    <div class="name">时间</div>
                    <div class="fontclass">#vip-shijian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-riqi"></use>
                    </svg>
                    <div class="name">日期</div>
                    <div class="fontclass">#vip-riqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shijianriqi"></use>
                    </svg>
                    <div class="name">时间日期</div>
                    <div class="fontclass">#vip-shijianriqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-jiesuo"></use>
                    </svg>
                    <div class="name">解锁</div>
                    <div class="fontclass">#vip-jiesuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-suoding"></use>
                    </svg>
                    <div class="name">锁定</div>
                    <div class="fontclass">#vip-suoding</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-fanhui"></use>
                    </svg>
                    <div class="name">返回</div>
                    <div class="fontclass">#vip-fanhui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shuaxin"></use>
                    </svg>
                    <div class="name">刷新</div>
                    <div class="fontclass">#vip-shuaxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-yidong"></use>
                    </svg>
                    <div class="name">移动</div>
                    <div class="fontclass">#vip-yidong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shaixuan"></use>
                    </svg>
                    <div class="name">筛选</div>
                    <div class="fontclass">#vip-shaixuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-anzhuangbao"></use>
                    </svg>
                    <div class="name">安装包</div>
                    <div class="fontclass">#vip-anzhuangbao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-fenxiang"></use>
                    </svg>
                    <div class="name">分享</div>
                    <div class="fontclass">#vip-fenxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-xihuan"></use>
                    </svg>
                    <div class="name">喜欢</div>
                    <div class="fontclass">#vip-xihuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shoucang"></use>
                    </svg>
                    <div class="name">收藏</div>
                    <div class="fontclass">#vip-shoucang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-youjian"></use>
                    </svg>
                    <div class="name">邮件</div>
                    <div class="fontclass">#vip-youjian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-weizhi"></use>
                    </svg>
                    <div class="name">位置</div>
                    <div class="fontclass">#vip-weizhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shequ"></use>
                    </svg>
                    <div class="name">社区</div>
                    <div class="fontclass">#vip-shequ</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-fankui"></use>
                    </svg>
                    <div class="name">反馈</div>
                    <div class="fontclass">#vip-fankui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-guanliyuan"></use>
                    </svg>
                    <div class="name">管理员</div>
                    <div class="fontclass">#vip-guanliyuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-biaoge"></use>
                    </svg>
                    <div class="name">表格</div>
                    <div class="fontclass">#vip-biaoge</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-yibiaoban"></use>
                    </svg>
                    <div class="name">仪表板</div>
                    <div class="fontclass">#vip-yibiaoban</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shujubiao"></use>
                    </svg>
                    <div class="name">数据表</div>
                    <div class="fontclass">#vip-shujubiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shujuji"></use>
                    </svg>
                    <div class="name">数据集</div>
                    <div class="fontclass">#vip-shujuji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-yanshi"></use>
                    </svg>
                    <div class="name">演示</div>
                    <div class="fontclass">#vip-yanshi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-zhuzhuangtu"></use>
                    </svg>
                    <div class="name">柱状图</div>
                    <div class="fontclass">#vip-zhuzhuangtu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-zhexiantu"></use>
                    </svg>
                    <div class="name">折线图</div>
                    <div class="fontclass">#vip-zhexiantu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-sandiantu"></use>
                    </svg>
                    <div class="name">散点图</div>
                    <div class="fontclass">#vip-sandiantu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-dabingtu"></use>
                    </svg>
                    <div class="name">大饼图</div>
                    <div class="fontclass">#vip-dabingtu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-ditu"></use>
                    </svg>
                    <div class="name">地图</div>
                    <div class="fontclass">#vip-ditu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-guanxitu"></use>
                    </svg>
                    <div class="name">关系图</div>
                    <div class="fontclass">#vip-guanxitu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-tuceng"></use>
                    </svg>
                    <div class="name">图层</div>
                    <div class="fontclass">#vip-tuceng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-sheji"></use>
                    </svg>
                    <div class="name">设计</div>
                    <div class="fontclass">#vip-sheji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-zuoduiqi"></use>
                    </svg>
                    <div class="name">左对齐</div>
                    <div class="fontclass">#vip-zuoduiqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-youduiqi"></use>
                    </svg>
                    <div class="name">右对齐</div>
                    <div class="fontclass">#vip-youduiqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shangduiqi"></use>
                    </svg>
                    <div class="name">上对齐</div>
                    <div class="fontclass">#vip-shangduiqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-xiaduiqi"></use>
                    </svg>
                    <div class="name">下对齐</div>
                    <div class="fontclass">#vip-xiaduiqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-chuizhijuzhong"></use>
                    </svg>
                    <div class="name">垂直居中</div>
                    <div class="fontclass">#vip-chuizhijuzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shuipingjuzhong"></use>
                    </svg>
                    <div class="name">水平居中</div>
                    <div class="fontclass">#vip-shuipingjuzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-hengxiangpingfen"></use>
                    </svg>
                    <div class="name">横向平分</div>
                    <div class="fontclass">#vip-hengxiangpingfen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-zongxiangpingfen"></use>
                    </svg>
                    <div class="name">纵向平分</div>
                    <div class="fontclass">#vip-zongxiangpingfen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shangyiyiceng"></use>
                    </svg>
                    <div class="name">上移一层</div>
                    <div class="fontclass">#vip-shangyiyiceng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-xiayiyiceng"></use>
                    </svg>
                    <div class="name">下移一层</div>
                    <div class="fontclass">#vip-xiayiyiceng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-diceng"></use>
                    </svg>
                    <div class="name">底层</div>
                    <div class="fontclass">#vip-diceng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-dingceng"></use>
                    </svg>
                    <div class="name">顶层</div>
                    <div class="fontclass">#vip-dingceng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-yingwen"></use>
                    </svg>
                    <div class="name">英文</div>
                    <div class="fontclass">#vip-yingwen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-zhongwen"></use>
                    </svg>
                    <div class="name">中文</div>
                    <div class="fontclass">#vip-zhongwen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-loading"></use>
                    </svg>
                    <div class="name">loading</div>
                    <div class="fontclass">#vip-loading</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-dui"></use>
                    </svg>
                    <div class="name">对</div>
                    <div class="fontclass">#vip-dui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-cuo"></use>
                    </svg>
                    <div class="name">错</div>
                    <div class="fontclass">#vip-cuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-gantanhao"></use>
                    </svg>
                    <div class="name">感叹号</div>
                    <div class="fontclass">#vip-gantanhao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-wenhao"></use>
                    </svg>
                    <div class="name">问号</div>
                    <div class="fontclass">#vip-wenhao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-tishi"></use>
                    </svg>
                    <div class="name">提示1</div>
                    <div class="fontclass">#vip-tishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-huigun"></use>
                    </svg>
                    <div class="name">回滚</div>
                    <div class="fontclass">#vip-huigun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-miyue"></use>
                    </svg>
                    <div class="name">密钥</div>
                    <div class="fontclass">#vip-miyue</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-qizi"></use>
                    </svg>
                    <div class="name">旗子</div>
                    <div class="fontclass">#vip-qizi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-tuding"></use>
                    </svg>
                    <div class="name">图钉</div>
                    <div class="fontclass">#vip-tuding</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-yunshangchuan"></use>
                    </svg>
                    <div class="name">云上传</div>
                    <div class="fontclass">#vip-yunshangchuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-yunxiazai"></use>
                    </svg>
                    <div class="name">云下载</div>
                    <div class="fontclass">#vip-yunxiazai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-liebiaozhankai"></use>
                    </svg>
                    <div class="name">列表展开</div>
                    <div class="fontclass">#vip-liebiaozhankai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-fanhuijiuban"></use>
                    </svg>
                    <div class="name">返回旧版</div>
                    <div class="fontclass">#vip-fanhuijiuban</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-xinshouyindao"></use>
                    </svg>
                    <div class="name">新手引导</div>
                    <div class="fontclass">#vip-xinshouyindao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-ermai"></use>
                    </svg>
                    <div class="name">耳麦</div>
                    <div class="fontclass">#vip-ermai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-liebiaoshouqi"></use>
                    </svg>
                    <div class="name">列表收起</div>
                    <div class="fontclass">#vip-liebiaoshouqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-zixun"></use>
                    </svg>
                    <div class="name">资讯</div>
                    <div class="fontclass">#vip-zixun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-dianyuan"></use>
                    </svg>
                    <div class="name">电源</div>
                    <div class="fontclass">#vip-dianyuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-chuanshu"></use>
                    </svg>
                    <div class="name">传输</div>
                    <div class="fontclass">#vip-chuanshu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-kaifa"></use>
                    </svg>
                    <div class="name">开发</div>
                    <div class="fontclass">#vip-kaifa</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-dengpao"></use>
                    </svg>
                    <div class="name">灯泡</div>
                    <div class="fontclass">#vip-dengpao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-peizhi"></use>
                    </svg>
                    <div class="name">配置</div>
                    <div class="fontclass">#vip-peizhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-zaixian"></use>
                    </svg>
                    <div class="name">在线</div>
                    <div class="fontclass">#vip-zaixian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-zhibiao"></use>
                    </svg>
                    <div class="name">指标</div>
                    <div class="fontclass">#vip-zhibiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-chongzi"></use>
                    </svg>
                    <div class="name">虫子</div>
                    <div class="fontclass">#vip-chongzi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-API"></use>
                    </svg>
                    <div class="name">API</div>
                    <div class="fontclass">#vip-API</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-A-B"></use>
                    </svg>
                    <div class="name">A-B</div>
                    <div class="fontclass">#vip-A-B</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-jiekou"></use>
                    </svg>
                    <div class="name">接口</div>
                    <div class="fontclass">#vip-jiekou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-zongtu"></use>
                    </svg>
                    <div class="name">总图</div>
                    <div class="fontclass">#vip-zongtu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-xiazuan"></use>
                    </svg>
                    <div class="name">下钻</div>
                    <div class="fontclass">#vip-xiazuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-dingyue"></use>
                    </svg>
                    <div class="name">订阅</div>
                    <div class="fontclass">#vip-dingyue</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-chaxun"></use>
                    </svg>
                    <div class="name">查询</div>
                    <div class="fontclass">#vip-chaxun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-qingxi"></use>
                    </svg>
                    <div class="name">清洗</div>
                    <div class="fontclass">#vip-qingxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-jiankong"></use>
                    </svg>
                    <div class="name">监控</div>
                    <div class="fontclass">#vip-jiankong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-shipin"></use>
                    </svg>
                    <div class="name">视频</div>
                    <div class="fontclass">#vip-shipin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-guolv"></use>
                    </svg>
                    <div class="name">过滤</div>
                    <div class="fontclass">#vip-guolv</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-zhangai"></use>
                    </svg>
                    <div class="name">障碍</div>
                    <div class="fontclass">#vip-zhangai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-tishi2"></use>
                    </svg>
                    <div class="name">提示2</div>
                    <div class="fontclass">#vip-tishi2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#vip-saomiao"></use>
                    </svg>
                    <div class="name">扫描</div>
                    <div class="fontclass">#vip-saomiao</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#vip-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
